<div class="room-controls">
  <input [(ngModel)]="roomName" placeholder="输入房间号" />
  <button (click)="joinRoom()">加入房间</button>
  <button (click)="leaveRoom()" *ngIf="joined">退出房间</button>
</div>

<!-- 视频容器 -->
<div class="video-container">
  <!-- 远端视频：主画面 或 画中画 -->
  <video
    #remoteVideo
    [ngClass]="{ 'main-video': !isSwapped, 'pip-video': isSwapped }"
    autoplay
    playsinline
    (click)="isSwapped ? swapVideo() : null"
  ></video>

  <!-- 本地视频：主画面 或 画中画 -->
  <video
    #localVideo
    [ngClass]="{ 'main-video': isSwapped, 'pip-video': !isSwapped }"
    autoplay
    muted
    playsinline
    (click)="!isSwapped ? swapVideo() : null"
  ></video>
</div>

<!-- 控制按钮 -->
<div class="controls">
  <button (click)="startCall()" [disabled]="callStarted || !joined">开始通话</button>
  <button (click)="hangUp()" [disabled]="!callStarted">结束通话</button>
</div>

<!-- 错误提示 -->
<div *ngIf="errorMsg" class="error">{{ errorMsg }}</div>
